<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul li{
        list-style: none;
        float: left;
        margin-left: 60px;
        line-height: 50px;
        font-size: 15px;
        font-weight: 600;
    }
    a{
        text-decoration: none;
        color: black;
    }
    a:hover{
        color: white;
    }
    .head{
        width: 100%;
        height: 150px;
        border-bottom: 1px solid #5F5D5D;
    }
    .head-left{
        width: 50%;
        height: 150px;
        /* background-color: antiquewhite; */
        float: left;
    }
    .zi{
        margin-left: 240px;
        margin-top: -100px;
        font-weight: 600;
        color: #5f5d5d;
    }
    .zi1{
        margin-left: 210px;
        font-size: 40px;
    }
    .zi2{
        margin-left: 223px;
        font-weight: 600;
        color: #5f5d5d;
    }
    .zi3{
        margin-left: 605px;
        margin-top: -93px;
        font-weight: 600;
        color: #5f5d5d;
    }
    .zi4{
        /* margin-left: 570px; */
        position: absolute;
        left: 570px;
        font-size: 40px;
    }
    .zi5{
        margin-left: 593px;
        margin-top: 52px;
        font-weight: 600;
        color: #5f5d5d;
    }
    .tu1{
        height: 100px;
        width: 100px;
        margin-left: 450px;
        position: absolute;
        top: 20px;
    }
    .head-right{
        width: 50%;
        height: 150px;
        /* background-color: cornflowerblue; */
        float: left;
    }
    .tu2{
        width: 100px;
        height: 100px;
        margin-left: 50px;
        margin-top: 15px;
    }
    .zi6{
        margin-left: 65px;
        font-weight: 400;
        color: #5f5d5d;
    }
    .tu3{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 980px;
        top: 17px;
    }
    .zi7{
        margin-left: 230px;
        margin-top: -20px;
        font-weight: 400;
        color: #5f5d5d;
    }
    .daohang{
        width: 100%;
        height: 50px;
        background-color: #226dc2;
    }
    .dh-center{
        width: 959px;
        height: 50px;
        margin: 0 auto;
        background-color: #226dc2;
    }

    .block{
        height: 800px;
        width: 1200px;
        margin: 0 auto;
    }
    .title-new{
        width: 1200px;
        height: 90px;
        /* background-color: #226DC2; */
        position: absolute;
        left: 259px;
        top: 590px;
    }
    .z8{
        position: absolute;
        left: -11px;
        top: 27px;
        color: #647e2f;
    }
    .lbt{
        width: 450px;
        height: 275px;
        background-color: red;
        position: absolute;
        left: 260px;
        top: 680px;
    }
    .new{
        width: 450px;
        height: 275px;
        background-color: bisque;
        position: absolute;
        left: 810px;
        top: 680px;
    }
    .xian{
        width: 100%;
        border-bottom: 1px solid  #5F5D5D;
        position: absolute;
        left: 0px;
        top: 1000px;
    }
    .ttt1{
        width: 300px;
        height: 200px;
        background-color: #c5948e;
        margin-left: 256px;
        margin-top: 80px;
        float: left;
    }
    .ttt2{
        width: 300px;
        height: 200px;
        background-color: #9cacd2;
        margin-left: 52px;
        margin-top: 80px;
        float: left;
    }
    .ttt3{
        width: 300px;
        height: 200px;
        background-color: #c5b8a6;
        margin-top: 80px;
        margin-left: 958px;

    }
    .title-new1{
        width: 1005px;
        height: 50px;
        position: absolute;
        left: 256px;
        top: 1020px;;
        /* background-color: #226DC2; */
    }
    .z9{
        margin-left: -12px;
        color: rgb(34, 109, 194);
    }
    .xian1{
        width: 100%;
        border-bottom: 1px solid  #5F5D5D;
        position: absolute;
        left: 0px;
        top: 1340px;
    }
    .title-new2{
        width: 1005px;
        height: 50px;
        position: absolute;
        left: 256px;
        top: 1360px;;
        /* background-color: #226DC2; */
    }
    .z10{
        margin-left: -12px;
        color: rgb(197, 148, 142);
    }
    .ttt4{
        width: 300px;
        height: 200px;
        background-color: #3c83bf;
        margin-left: 256px;
        margin-top: 140px;
        float: left;
    }
    .ttt5{
        width: 300px;
        height: 200px;
        background-color: #f58d27;
        margin-left: 52px;
        margin-top: 140px;
        float: left;
    }
    .ttt6{
        width: 300px;
        height: 200px;
        background-color: #5ca696;
        margin-top: 140px;
        margin-left: 958px;

    }
    .xian2{
        width: 100%;
        border-bottom: 1px solid  #5F5D5D;
        position: absolute;
        left: 0px;
        top: 1680px;
    }
    .title-new3{
        width: 1005px;
        height: 50px;
        position: absolute;
        left: 256px;
        top: 1700px;;
        /* background-color: #226DC2; */
    }
    .z11{
        margin-left: -12px;
        color: rgb(92, 166, 150);
    }
    .ttt7{
        width: 300px;
        height: 200px;
        background-color: #c5b8a6;
        margin-left: 256px;
        margin-top: 140px;
        float: left;
    }
    .ttt8{
        width: 300px;
        height: 200px;
        background-color: #585fa9;
        margin-left: 52px;
        margin-top: 140px;
        float: left;
    }
    .ttt9{
        width: 300px;
        height: 200px;
        background-color: #d0b6a7;
        margin-top: 140px;
        margin-left: 958px;

    }
    .xian3{
        width: 100%;
        border-bottom: 1px solid  #5F5D5D;
        position: absolute;
        left: 0px;
        top: 2030px;
    }
    .xinxi{
        width: 455px;
        height: 160px;
        position: absolute;
        left: 255px;
        top: 2080px;
    }
    .xinxi1{
        width: 455px;
        height: 160px;
        position: absolute;
        left: 810px;
        top: 2080px;
    }
    .z12{
        margin-left: -10px;
        color: rgb(100, 126, 47);
    }
    .z13{
        margin-left: -10px;
        color: rgb(34, 109, 194);
    }
    .q1{
        font-size: 14px;
        position: absolute;
        left: 35px;
        top: 60px;
    }
    .q2{
        font-size: 14px;
        position: absolute;
        left: 35px;
        top: 90px;
    }
    .q3{
        font-size: 14px;
        position: absolute;
        left: 35px;
        top: 120px;
    }
    .q4{
        position: absolute;
        left: 390px;
        top: 57px;
    }
    .q5{
        position: absolute;
        left: 390px;
        top: 88px;
    }
    .q6{
        position: absolute;
        left: 390px;
        top: 118px;
    }
    .q1:hover{
        color: red;
    }
    .q2:hover{
        color: red;
    }
    .q3:hover{
        color: red;
    }
    .d1{
        font-size: 14px;
        position: absolute;
        left: 35px;
        top: 50px;
    }
    .d2{
        font-size: 14px;
        position: absolute;
        left: 35px;
        top: 80px;
    }
    .d3{
        font-size: 14px;
        position: absolute;
        left: 35px;
        top: 110px;
    }
    .d4{
        position: absolute;
        left: 390px;
        top: 50px;
    }
    .d5{
        position: absolute;
        left: 390px;
        top: 80px;
    }
    .d6{
        position: absolute;
        left: 390px;
        top: 108px;
    }
    .d7{
        font-size: 14px;
        position: absolute;
        left: 35px;
        top: 138px;
    }
    .d8{
        position: absolute;
        left: 390px;
        top: 135px;
    }
    .end{
        width: 100%;
        height: 225px;
        background-color: rgb(61, 61, 61);
        position: absolute;
        top: 2290px;

    }
    #span1{
        font-size: 30px;
        font-weight: bolder;
        color: black;
        text-align: center;
    }
    #showImg{
        text-align: center;
    }
</style>
<body>
<div id="app">

    <div class="head">
        <div class="head-left">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.aso.aizhan.com%2Ficon%2Ff4%2Fb5%2F9f%2Ff4b59ff69d8d2c7d4b740988af01d9a6.jpg&refer=http%3A%2F%2Fimg.aso.aizhan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?"style="width: 100px;height: 100px;margin-top: 20px;margin-left: 100px;border-radius: 100px;" >
            <p class="zi">A&nbsp;A&nbsp;A&nbsp;公&nbsp;司&nbsp;附&nbsp;属</p>
            <h1 class="zi1">好医生医院</h1>
            <p class="zi2">Good Doctor Hospital</p>
            <img class="tu1" src="https://img2.baidu.com/it/u=749510221,3100036452&fm=253&fmt=auto&app=138&f=JPEG?w=519&h=500"  >
            <p class="zi3">郑&nbsp;州&nbsp;市&nbsp;A&nbsp;A&nbsp;A</p>
            <h1 class="zi4">红十字医院</h1>
            <p class="zi5">Red Cross Hospital</p>
        </div>
        <div class="head-right">
            <img class="tu2" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.puchedu.cn%2Fuploads%2F2%2F26%2F3154420378%2F4287584555.jpg&refer=http%3A%2F%2Fimg.puchedu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?" >
            <p class="zi6">微信公众号</p>
            <img class="tu3" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.puchedu.cn%2Fuploads%2F2%2F26%2F3154420378%2F4287584555.jpg&refer=http%3A%2F%2Fimg.puchedu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?" >
            <p class="zi7">下载APP</p>
            <el-button style="position: absolute;left: 1170px;top: 50px;" @click="dialogFormVisible = true">员工登录</el-button>
            <el-button style="position: absolute;left: 1280px;top: 50px;" @click="undialogFormVisible = true">用户登录</el-button>
            <el-button style="position: absolute;left: 1160px;top: 100px;" @click="zhuce()">注册账号</el-button>
            <el-button style="position: absolute;left: 1280px;top: 100px;" @click="tuichu()">退出账号</el-button>

        </div>

        <p style="position: absolute; left: 1200px; margin-top: 10px;">请先登录:{{user.nickname}}</p>

    </div>

    <div class="daohang">
        <div class="dh-center">
            <ul>
                <li><a href="">网站首页</a></li>
                <li><a href="">就医入口</a></li>
                <li><a href="">学科及专家</a></li>
                <li><a href="">科学研究</a></li>
                <li><a href="">医学教育</a></li>
                <li><a href="">人才招聘</a></li>
                <li><a href="">郑州信息</a></li>

            </ul>
        </div>
    </div>
    <div style="width: 100%;height: 10px;"></div>
    <!--员工登录弹窗-->
    <el-dialog title="员工登录" :visible.sync="dialogFormVisible" style="width: 1000px;margin-left: 240px;">
        <el-form :model="info" status-icon :rules="rules" ref="info" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="账号" prop="username">
                <el-input  v-model="info.username" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="info.password" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('info')">提交</el-button>
                <el-button @click="resetForm('info')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--用户登录弹窗-->
    <el-dialog title="用户登录" :visible.sync="undialogFormVisible" style="width: 1000px;margin-left: 240px;">
        <el-form :model="data" status-icon :rules="rules" ref="data" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="账号" prop="zhanghao">
                <el-input  v-model="data.zhanghao" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="mima">
                <el-input type="password" v-model="data.mima" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="commit('data')">提交</el-button>
                <el-button @click="resetForm('data')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 轮播图 -->
    <template>
        <div class="block">
            <span class="demonstration"><!-- 默认 Hover 指示器触发 --></span>
            <el-carousel height="390px">
                <el-carousel-item v-for="item in sreenList" :key="item">
                    <!-- <h3 class="small">{{ item }}</h3> -->
                    <img :src="item" >
                </el-carousel-item>
            </el-carousel>
        </div>
    </template>
    <div class="title-new">
        <h1 class="z8">丨&nbsp;&nbsp;&nbsp;郑州新闻</h1>
    </div>
    <!-- 新闻轮播图片 -->
    <div class="lbt">
        <template>
            <el-carousel :interval="5000" arrow="always" indicator-position="none">
                <el-carousel-item v-for="item in tupian" :key="item">
                    <img :src="item" style="width: 450px; height: 275px;" >
                </el-carousel-item>
            </el-carousel>
        </template>
    </div>

    <div class="new" style="margin: 50px; margin-top: -3px" >
        <span class="demonstration"></span>
        <el-carousel trigger="click" style="width: 450px; height: 275px;" >
            <el-carousel-item v-for="item in Info" :key="item">

                <div id="span1">{{item.title}}</div>

                <div id="showImg" v-html="item.content" @click="clickShow(item.id)"></div>

                <!--<p><h2 v-html="item.title" align="center"></h2></p>-->

                <!--<span v-html="item.content"></span>-->

            </el-carousel-item>
        </el-carousel>
    </div>


    <div class="xian"></div>

    <div class="title-new1">
        <h1 class="z9">丨&nbsp;&nbsp;&nbsp;患者通道</h1>
    </div>
    <div class="ttt1">
        <img style="margin-left: 100px; margin-top: 50px;" @click="charaKes()" src="https://www.zs-hospital.sh.cn/zsyy/web/images/home_block_1-1.png" >
    </div>
    <div class="ttt2" @click="yuyue()">
        <img style="margin-left: 100px; margin-top: 50px;" src="https://www.zs-hospital.sh.cn/zsyy/web/images/home_block_1-2.png" >
    </div>
    <div class="ttt3" @click="show()">
        <img style="margin-left: 100px; margin-top: 50px;" src="https://www.zs-hospital.sh.cn/zsyy/web/images/home_block_1-3.png" >
    </div>

    <div class="xian1"></div>

    <div class="title-new2">
        <h1 class="z10">丨&nbsp;&nbsp;&nbsp;医护通道</h1>
    </div>
    <div class="ttt4">
        <img style="margin-left: 100px; margin-top: 50px;" src="https://www.zs-hospital.sh.cn/zsyy/web/images/home_block_2-1.png" >
    </div>
    <div class="ttt5">
        <img style="margin-left: 100px; margin-top: 50px;" src="https://www.zs-hospital.sh.cn/zsyy/web/images/home_block_2-2.png" >
    </div>
    <div class="ttt6">
        <img style="margin-left: 100px; margin-top: 50px;" src="https://www.zs-hospital.sh.cn/zsyy/web/images/home_block_3-3.png" >
    </div>

    <div class="xian2"></div>

    <div class="title-new3">
        <h1 class="z11">丨&nbsp;&nbsp;&nbsp;医院信息</h1>
    </div>
    <div class="ttt7">
        <img style="margin-left: 100px; margin-top: 50px;" src="https://www.zs-hospital.sh.cn/zsyy/web/images/home_block_3-1.png" >
    </div>
    <div class="ttt8">
        <img style="margin-left: 100px; margin-top: 50px;" src="https://www.zs-hospital.sh.cn/zsyy/web/images/home_block_3-2.png" >
    </div>
    <div class="ttt9">
        <img style="margin-left: 100px; margin-top: 50px;" src="https://www.zs-hospital.sh.cn/zsyy/web/images/home_block_2-3.png" >
    </div>

    <div class="xian3"></div>

    <div class="xinxi">
        <h2 class="z12">丨&nbsp;&nbsp;&nbsp;郑州信息</h2>
        <a class="q1" href="">郑州故事</a>
        <p class="q4">></p>
        <a class="q2" href="">院史考据</a>
        <p class="q5">></p>
        <a class="q3" href="">好医院院报</a>
        <p class="q6">></p>
    </div>
    <div class="xinxi1">
        <h2 class="z13">丨&nbsp;&nbsp;&nbsp;好医院建设</h2>
        <a class="d1" href="">党建</a>
        <p class="d4">></p>
        <a class="d2" href="">工会</a>
        <p class="d5">></p>
        <a class="d3" href="">团委</a>
        <p class="d6">></p>
        <a class="d7" href="">红十字宣传栏</a>
        <p class="d8">></p>
    </div>

    <div class="end">

        <button @click="zfb()">456</button>
        <h1 style="color: white; margin-left: 650px; margin-top: 80px;">结尾明天写</h1>

    </div>

</div>

<script>

    $.get("/ssm/news/index",function (backDate) {
        haha.Info=backDate.data;
    });
    $.get("/ssm/admin/getNickname",function (backData) {
        haha.user.nickname = backData.data;
    });

    var haha = new Vue({
        el:"#app",
        data:{
            Info:[],
            andialogFormVisible:true,
            user:{
                nickname:''
            },
            sreenList:[
                'https://www.zs-hospital.sh.cn/images/thumbnailimg/month_1701/20170103112224153.jpg',
                'https://www.zs-hospital.sh.cn/images/thumbnailimg/month_1701/201701031120535219.jpg',
                'https://www.zs-hospital.sh.cn/images/thumbnailimg/month_1701/201701031120014106.jpg',
                'https://www.zs-hospital.sh.cn/images/thumbnailimg/month_1701/201701250831103109.jpg',
            ],
            tupian:[
                'https://www.zs-hospital.sh.cn/images/thumbnailimg/month_2202/202202081249555817.jpg',
                'https://www.zs-hospital.sh.cn/images/thumbnailimg/month_2202/202202081214547611.jpg',
                'https://www.zs-hospital.sh.cn/images/thumbnailimg/month_2111/20211122043908526.jpg',
                'https://www.zs-hospital.sh.cn/images/thumbnailimg/month_2110/202110280409159463.jpg',
                'https://www.zs-hospital.sh.cn/images/thumbnailimg/month_2107/202107010647281914.jpg'
            ],
            dialogFormVisible:false,
            undialogFormVisible:false,
            info:{},
            data:{},//登录
            name:{},
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                zhanghao: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                mima: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            }
        },
        methods:{
            tuichu(){
                this.$confirm('你将退出登录, 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/ssm/admin/quittwo/", function (backData) {
                        haha.$message.success(backData.msg);
                        window.parent.location.href = "/ssm";
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            },

            charaKes(){
                window.location.href="/ssm/charaKes.html";
            },

            clickShow(id){
                window.location.href="./news/newsShow.html?id="+id;
            },

            zfb(){
                window.location.href = "/ssm/alibaba.html"
            },
            commit(formName) {
                haha.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/ssm/admin/signin", haha.data, function (backData) {
                            if( backData.code == 2 ){
                                haha.$message.error(backData.msg);
                            } else if( backData.code == 1 ){
                                // window.location.href = "/ssm/index.html";
                                haha.user = backData.data;
                                haha.$message.success("登录成功");
                                haha.undialogFormVisible = false;

                            }
                        });
                    }
                });
            },
            submitForm(formName) {
                haha.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/ssm/admin/login", haha.info, function (backData) {
                            if (backData.code == 2) {
                                haha.$message.error(backData.msg);
                            } else if (backData.code == 1) {
                                window.location.href = "/ssm/main.html";

                            }
                        });
                    }
                });
            },
            resetForm(formName) {
                haha.$refs[formName].resetFields();
            },
            zhuce(){
                window.location.href = "/ssm/register.html";
            },
            yuyue(){
                $.get("/ssm/admin/yanzheng",function (backData) {
                    if( backData.code ==2 ){
                        haha.$alert('<strong>请登录后预约</strong>', '未登录', {
                            dangerouslyUseHTMLString: true
                        });
                    }if( backData.code == 1 ){
                        window.location.href = "/ssm/guahao1.html";
                    }
                });

            },
            show(){
                $.get("/ssm/admin/verification",function (backData) {
                    if( backData.code == 2 ){
                        haha.$alert('<strong>请登录后查看预约结果</strong>', '未登录', {
                            dangerouslyUseHTMLString: true
                        });
                    }else {
                        var a = backData.data;
                        window.location.href = "/ssm/result.html?a="+a;
                    }
                })

            }
        }
    });
</script>
</body>
</html>